<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="dist/css/swiper.min.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-wrapper {
            /* 通过改变animation-timing-function 制作弹性切换效果 */
            transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>

<body>

    <header>
        <div class="container">
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">生活</a></li>
                <li><a href="">技术</a></li>
                <li><a href="">经历</a></li>
            </ul>

            <div class="left">
                <img class="ding" src="img/ddd.png" alt="">
                <img class="tu" src="img/奈布.jpg" alt="">
            </div>
            <div class="right">
                <h3>姓名:唐志国</h3>
                <h3>姓别：男</h3>
                <h3>地址：河北秦皇岛</h3>
                <h3>QQ：1662766069</h3>
                <h3>联系方式：17531363672</h3>
            </div>
        </div>
    </header>

    <div class="banner">
        <div class="container">
            <h2>爱风景</h2>
            <!-- Swiper -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="img/sw--1.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="img/sw--2.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="img/sw--3.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="img/sw--4.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="img/sw--5.jpg" alt=""></div>
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </div>

    <div class="technology">
        <div class="container">
            <h2>爱技术</h2>
            <div class="box">
                <div class="top" id="side">
                    <ul>
                        <li class="active">html</li>
                        <li>css</li>
                        <li>javascript</li>
                    </ul>
                </div>
                <div class="bottom" id="menu">
                    <div class="xxk active">
                        HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
                        HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
                        超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。
                    </div>
                    <div class="xxk">
                        层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）
                        等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
                    </div>
                    <div class="xxk">
                        JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，
                        广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="experience">
            
        <div class="container">
                <h2>工作经历</h2>
            <div class="box">
                <div class="top">
                    <ul>
                        <li>公司名称：<p>天猫家装e站（济南站）</p></li>
                        <li>职位名称：<p>家装顾问</p></li>
                        <li>工作时间：<p>2017.5 —— 2017.7</p></li>
                        <li>离职原因：<p>实习结束</p></li>
                    </ul>
                </div>
                <div class="bottom">
                    <ul>
                        <li>公司名称：<p>和君纵达科技有限公司（北京分公司）</p></li>
                        <li>职位名称：<p>网贷催收</p></li>
                        <li>工作时间：<p>20017.11 —— 2018.2</p></li>
                        <li>离职原因：<p>实习结束</p></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script src="js/script.js"></script>
    <script src="dist/js/swiper.min.js"></script>
    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            speed: 2000,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });

        var nav = document.querySelectorAll("#side li");
        var main = document.querySelectorAll("#menu .xxk");
        var box = document.querySelector("#box");


        console.log(nav);
        console.log(main);
        console.log(box);

        for (var i = 0; i < nav.length; i++) {
            nav[i].index = i;
            nav[i].addEventListener('click', function () {
                for (var k = 0; k < nav.length; k++) {
                    nav[k].classList.remove('active');
                    main[k].classList.remove('active')
                }
                this.classList.add('active');
                main[this.index].classList.add('active')
            });
        }

    </script>
</body>

</html>